<script setup>
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { login } from "../apis/user";
import { register } from "../apis/register";

// 引用 el-form 组件
const loginFormRef = ref();
const registerFormRef = ref();

//跳转功能
const router = useRouter();
const jump = async (e) => {
  if (e === 1) {
    router.push("/index");
  }
  console.log("跳转成功！");
};

// 登录表单相关的数据
const loginData = reactive({
  form: {
    username: "",
    password: "",
  },
  rules: {
    username: [
      {
        required: true, // 是否必填
        message: "必须输入用户名",
        trigger: "blur",
      },
      { min: 2, max: 10, message: "长度为[2-10]", trigger: "blur" },
    ],
    password: [
      {
        required: true,
        message: "必须输入密码",
        trigger: "change",
      },
      { min: 3, max: 20, message: "长度为[3-20]", trigger: "blur" },
    ],
  },
});
// 注册表单相关的数据
const registerData = reactive({
  form: {
    username: "",
    password: "",
  },
  rules: {
    username: [
      {
        required: true, // 是否必填
        message: "必须输入用户名",
        trigger: "blur",
      },
      { min: 2, max: 10, message: "长度为[2-10]", trigger: "blur" },
    ],
    password: [
      {
        required: true,
        message: "必须输入密码",
        trigger: "change",
      },
      { min: 3, max: 20, message: "长度为[3-20]", trigger: "blur" },
    ],
  },
});
// 注册功能
const registerSubmit = async (registerFormRef) => {
  await registerFormRef.validate((valid) => {
    if (valid) {
      register(registerData.form).then((response) => {
        console.log(response);
      });
    }
  });
};

// 登录功能
const loginSubmit = async (loginFormRef) => {
  await loginFormRef.validate((valid) => {
    //校验表单是否通过
    if (valid) {
      login(loginData.form).then((response) => {
        console.log("这是登录数据");
        console.log(response.data);
        if (response.code === 2000) {
          jump(1);
        }
      });
    }
  });
};

// 滑动的状态js
let flag = true;
const mySwitch = () => {
  if (flag) {
    // 获取到滑动盒子的dom元素并修改它移动的位置
    $(".pre-box").css("transform", "translateX(100%)");
    // 获取到滑动盒子的dom元素并修改它的背景颜色
    $(".pre-box").css("background-color", "#c9e0ed");
    //修改图片的路径
    $("img").attr("src", "/src/views/imgs/liang.webp");
  } else {
    //同上
    $(".pre-box").css("transform", "translateX(0%)");
    $(".pre-box").css("background-color", "#edd4dc");
    $(".img").attr("src", "/src/views/imgs/boki.png");
  }
  flag = !flag;
};
</script>

<template>
  <div class="box">
    <div class="pre-box">
      <h1>WELCOME</h1>
      <p>JOIN US!</p>
      <div class="img-box">
        <img class="img" src="../views/imgs/boki.png" />
      </div>
    </div>
    <!-- 注册 -->
    <div class="register-form">
      <div class="title-box">
        <h1>注册</h1>
      </div>
      <el-form
        ref="registerFormRef"
        label-postion="top"
        :model="registerData.form"
        :rules="registerData.rules"
      >
        <div class="input-box">
          <el-form-item prop="username">
            <input v-model="registerData.form.username" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="password">
            <input
              v-model="registerData.form.password"
              type="password"
              placeholder="密码"
            />
          </el-form-item>
        </div>
        <el-button type="primary" @click="registerSubmit(loginFormRef)"
          >注册</el-button
        >
        <p @click="mySwitch">已有账号?去登录</p>
      </el-form>
    </div>
    <!-- 登录 -->
    <div class="login-form">
      <div class="title-box">
        <h1>登录</h1>
      </div>
      <el-form
        ref="loginFormRef"
        label-postion="top"
        :model="loginData.form"
        :rules="loginData.rules"
      >
        <div class="input-box">
          <el-form-item prop="username">
            <input v-model="loginData.form.username" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="password">
            <input
              v-model="loginData.form.password"
              type="password"
              placeholder="密码"
            />
          </el-form-item>
        </div>
        <el-button type="primary" @click="loginSubmit(loginFormRef)"
          >登录</el-button
        >
        <p @click="mySwitch">没有账号?去注册</p>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
/* 去除input的轮廓 */
input {
  outline: none;
}

span {
  position: absolute;
  z-index: 0;
  bottom: 0;
  border-radius: 50%;
  /*径向的渐变效果*/
  background: radial-gradient(
    circle at 72% 28%,
    #fff 3px,
    #ff7edf 8%,
    #5b5b5b,
    #aad7f9 100%
  );
}

/* 最外层的盒子 */
.box {
  width: 1050px;
  height: 600px;
  display: flex;
  /* 相对定位 */
  position: relative;
  background: linear-gradient(
    to right,
    rgba(247, 209, 215),
    rgba(191, 227, 241)
  );
  z-index: 2;
  margin: auto;
  /* 设置圆角 */
  border-radius: 8px;
  /* 设置边框 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* 设置盒子阴影 */
  box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
}

/* 滑动的盒子 */
.pre-box {
  /* 宽度为大盒子的一半 */
  width: 50%;
  height: 100%;
  /* 绝对定位 */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  border-radius: 4px;
  background-color: #edd4dc;
  box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
  /* 动画过渡效果 */
  transition: 0.75s ease-in-out;
}

/* 滑动盒子的标题 */
.pre-box h1 {
  margin-top: 150px;
  text-align: center;
  letter-spacing: 5px;
  color: white;
  /* 禁止选中 */
  user-select: none;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 滑动盒子的文字 */
.pre-box p {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 0;
  /* 禁止选中 */
  user-select: none;
  font-weight: bold;
  color: white;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 图片盒子 */
.img-box {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  /* 圆形效果 */
  border-radius: 50%;
  /* 禁止选中 */
  user-select: none;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 图片 */
.img-box img {
  width: 100%;
  transition: 0.5s;
}

/* 登录和注册盒子 */
.login-form,
.register-form {
  flex: 1;
  height: 100%;
}

/* 标题盒子 */
.title-box {
  height: 300px;
  line-height: 500px;
}

/* 标题 */
.title-box h1 {
  text-align: center;
  color: white;
  /* 禁止选中 */
  user-select: none;
  letter-spacing: 5px;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 输入框盒子 */
.input-box {
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
}

/* 输入框 */
input {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 10px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 120px;
  backdrop-filter: blur(10px);
}

input:focus {
  /* 光标*/
  color: #b0cfe9;
}

/* 聚焦时隐藏文字 */
input:focus::placeholder {
  opacity: 0;
}

/* 按钮 */
.btn-box {
  display: flex;
  justify-content: center;
}

/* 按钮 */
button {
  width: 100px;
  height: 30px;
  margin: 0 7px;
  line-height: 30px;
  border: none;
  border-radius: 4px;
  background-color: #69b3f0;
  color: white;
}
button a {
  color: gray;
  text-decoration: none;
}
button a:hover {
  text-decoration: none;
}
/* 按钮悬停 */
button:hover {
  /* 显示有小手的效果 */
  cursor: pointer;
  /* 透明度 */
  opacity: 0.8;
}

/* 按钮文字 */
.btn-box p {
  height: 30px;
  line-height: 30px;
  /* 禁止选中 */
  user-select: none;
  font-size: 14px;
  color: white;
}

.btn-box p:hover {
  cursor: pointer;
  border-bottom: 1px solid white;
}
.el-form {
  padding: 20px 40px;
}
</style>
